// 头部组建

import { useState, useEffect } from 'react';
import { IconArrowRight, IconArrowLeft } from '@arco-design/web-react/icon';
import './index.less';

type HerderType = {
  navigate?: (path: string) => void
}

function Herder(props: HerderType) {
  const { navigate } = props
  const [theme, setTheme] = useState<string>(localStorage.getItem('theme') || 'light')
  const isUrl = window.location.pathname === '/market'


  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
  }

  // 在应用加载时设置当前主题
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme)
  }, [theme]);

  // 跳转事件
  const onLink = () => {
    if (isUrl) {
      history.go(-1)
      return
    }
    navigate?.('/market')
  }

  return (
    <div className='her-box'>
      <div className='her-flex'>
        <span className='her-text' onClick={() => {
          onLink()
        }}>{isUrl && <IconArrowLeft />} {isUrl ? '返回' : '市场行情'} {!isUrl && <IconArrowRight />} </span>
        <span className='her-daytime' onClick={() => toggleTheme()}>{theme === 'light' ? '白天' : '黑夜'}</span>
      </div>

    </div>
  )
}

export default Herder